<!DOCTYPE html>
<html lang="zh-CN">
<head> 
    <script src="jsLoad.js"></script>
</head> 

<!-- 原始页面 -->
<div id="targetDiv">原始内容</div>
<button onclick="replaceContent()">点击替换</button>

<button onclick="show()">点击显示scriptid</button>

<script>
  function replaceContent() {
    const newContent = `
      <h2>新标题</h2>
      <p>这是动态插入的内容。</p>

      <!-- 内联 CSS -->
      <style>
        h2 { color: blue; }
      </style>

      <!-- 外部 CSS -->
      <link rel="stylesheet" href="https://example.com/styles.css">

      <!-- 内联 JS -->
      <script id="myScript">
        console.log("内联脚本执行！");
        document.querySelector('h2').style.fontWeight = 'bold';
      <\/script>

      <script>
		alert("Loaded!");
		function hello(){
		  alert("Hello");
		}
	  <\/script>

      <!-- 外部 JS -->
      <script src="https://example.com/script.js"><\/script>
    `;

    // 调用方法替换内容
    replaceContentWithResources('targetDiv', newContent);
  }

  function show(){
      const script = document.getElementById('myScript');
	   console.log(script.textContent); 
	   hello();
  }
</script>